<template>
  <div class="el-main">
    <div style="background: white">
      <div class="tableTitle" style="padding-bottom: 20px;">
        <el-button style="margin-right: 20px;" @click="openPostDialog">添加职位</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{prop: 'level', order: 'descending'}"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column
        type="index"
        width="200px">
      </el-table-column>
      <el-table-column
        prop="post"
        label="职位"
        style="width: 20%;"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="level"
        label="等级"
        style="width: 20%;"
        sortable
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作"
        style="width: 20%;"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon-s-order" @click="handleEdit(scope.$index, scope.row)" style="cursor: pointer"></i>
          <i class="el-icon-delete" @click="deletePost(scope.$index, scope.row)"
             style="cursor: pointer; padding-left: 10px;"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改职位"
      :visible.sync="editPostDialog"
      width="500px"
      center
      :modal='false'>
      <el-form ref="form" label-width="80px">
        <el-form-item label="职位">
          <el-input v-model="currentPost"></el-input>
        </el-form-item>
        <el-form-item label="等级">
          <el-input v-model="Level"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="alterPost()">确定</el-button>
        <el-button @click="editPostDialog = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="增加职位"
      :visible.sync="addPostDialog"
      width="500px"
      center
      :modal='false'>
      <el-form ref="form" label-width="80px">
        <el-form-item label="职位名称">
          <el-input v-model="addPostName"></el-input>
        </el-form-item>
        <el-form-item label="职位等级">
          <el-input v-model="addPostLevel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addPost()">确定</el-button>
        <el-button @click="addPostDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const axios = require('axios');
export default {
  name: "Post",
  data() {
    return {
      editPostDialog: false,
      deletePostDialog: false,
      addPostDialog: false,
      currentPost: '',
      currentIndex: 0,
      currentId: -1,
      addPostName: '',
      addPostLevel: '',
      Level: "",
      addInput: {
        post: "",
        level: ""
      },
      tableData: []
    }
  },
  methods: {
    handleEdit(index, row) {
      this.currentPost = row.post;
      this.Level = row.level.replace("LV","");
      this.editPostDialog = true;
      this.currentIndex = index;
      this.currentId=row.id;
    },
    alterPost() {
      this.editPostDialog = false;
      this.tableData[this.currentIndex].post = this.currentPost;
      this.tableData[this.currentIndex].level = "LV" + this.Level;

      let reg = /^(-?\d+)(\.\d+)?$/;
      if(this.Level == ""){
          this.$message.error("输入不能为空");
      }else if(reg.test(this.Level)){
        this.$message.error("只能输入数字");
      }else{
        axios.post('/updatePost',
          {"id": this.currentId,
            "enterprise_id": window.localStorage.getItem("enterprise_id"),
            "post_name": this.currentPost,
            "post_level": this.Level}).then(res => {
          // console.log(res.data)
          console.log(res.data);
          // this.$router.go(0)
        });
      }
    },

    openPostDialog() {
      this.addPostDialog = true;
    },

    addPost() {
      axios.post('/addPost',
        {"post_name": this.addPostName, "post_level": this.addPostLevel, "enterprise_id": window.localStorage.getItem("enterprise_id")}).then(res => {
        // console.log(res.data)
        if (res.data === true){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          // this.tableData.splice(index,1)
        }
        this.$router.go(0)
      });
      // this.addPostDialog = false;
    },

    deletePost(index, row) {
      console.log(row)
      this.$confirm('确定删除职位' + row.post + '?', '删除职位', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        modal: false,
      }).then(() => {
        axios.post('/deletePost',
          {"id": row.id}).then(res => {
          // console.log(res.data)
          if (res.data === true){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // this.tableData.splice(index,1)
          }
          // this.$router.go(0)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  created() {
    setTimeout(() => {
      this.$parent.$parent.CheckPost();
      this.$parent.$parent.ToShow();
    }, 100)
    axios.post('/getAllPost',
      {"id": window.localStorage.getItem("enterprise_id")}).then(res => {
      // console.log(res.data)
      this.tableData = []
      res.data.forEach(data => {
        let temp = {
          id: data.id,
          post: data.post_name,
          level: 'LV' + data.post_level
        }
        this.tableData.push(temp)
      })
    });
  }
}
</script>

<style scoped>
.tableTitle {
  font-size: 25px;
  padding-left: 10px;
  padding-top: 20px;
  text-align: right;
}
</style>
